// createRouter - 创建路由器的方法
// createWebHistory - 创建 history 模式的路由
// createWebHashHistory - 创建 hash 模式的路由
import { createRouter, createWebHashHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useMenuStore } from '@/stores/menu'

// 创建路由器实例对象，之前是 new VueRouter
const router = createRouter({
  // history 配置项，用于配置使用那种路由模式，之前是通过 mode: 'hash’ | 'history'
  // import.meta.env.BASE_URL 获取的是一个 /, 用在这儿是为了设置 路由的基准路径。不设置就是 /
  history: createWebHashHistory(),
  // 路由配置
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/index.vue')
    },
    {
      path: '/',
      name: 'index',
      component: () => import('@/layout/index.vue'),
      children: [
        {
          path: '',
          component: () => import('@/views/test.vue')
        }
        // {
        //   path: 'class/students',
        //   component: () => import('@/views/class/students.vue')
        // },
        // {
        //   path: 'class/teachers',
        //   component: () => import('@/views/class/teachers.vue')
        // },
        // {
        //   path: 'dashboard',
        //   component: () => import('@/views/dashboard/index.vue')
        // },
        // {
        //   path: 'sys/user-list',
        //   component: () => import('@/views/sys/user-list/index.vue')
        // },
        // {
        //   path: 'sys/menu-list',
        //   component: () => import('@/views/sys/menu-list/index.vue')
        // },
        // {
        //   path: 'sys/role-list',
        //   component: () => import('@/views/sys/role-list/index.vue')
        // }
      ]
    }
    /**
     * 404路由：
     *    在 VueRouter@4 版本中，不能使用 * 号通配符处理了
     *    需要使用 /:pathMatch(.*)*
     */
    // {
    //   path: '/:pathMatch(.*)*',
    //   name: '404',
    //   component: () => import('@/views/error/404.vue')
    // }
  ]
})

/**
 * VueRouter4 与 VueRouter3 在路由守卫的 next 参数有不同：
 *    1. VueRouter4 可以不使用 next 函数，而是直接根据返回值来控制导航是否生效
 *    2. 阻止导航：return false   ===  next(false)
 *    3. 放行:    return true | 没有return    ===  next()
 *    ×4. 重新导航：return '/login'   return { name: 'login' }
 *    5. 重定向到某个路由： return { name: 'login' }  return '/login'
 *        ===
 *        next('/login')
 *        next({ name: 'login' })
 */
const whiteRouteNames = ['login', '404']
// 是否已经动态添加过路由
let isAdded = false

// 全局前置守卫
router.beforeEach(async (to) => {
  // 获取 userStore
  const userStore = useUserStore()
  // 获取 menuStore
  const menuStore = useMenuStore()

  // 判断当前访问的路由是否不在白名单中
  if (!whiteRouteNames.includes(to.name as string)) {
    // 校验是否没有登录
    if (!userStore.token) {
      return { name: 'login' }
    }

    // 没有动态添加路由时，就去添加
    if (!isAdded) {
      // 获取有权限的路由对象数组
      const accessRoutes = await menuStore.genAccessRoutes()
      // 循环 使用 router.addRoute 动态添加路由
      accessRoutes.forEach((route) => {
        router.addRoute('index', route)
      })
      // PS: 需要手动添加 404 路由
      router.addRoute({
        path: '/:pathMatch(.*)*',
        name: '404',
        component: () => import('@/views/error/404.vue')
      })
      // 修改 isAdded
      isAdded = true
      // 重定向到他要去的路由上
      return { ...to }
    }
  }
})

// 将路由器的实例对象，导出
export default router
